<template>
    <el-card class="people" shadow="always" :body-style="{ padding: '20px' }">
        <div class="header" slot="header">
            <div class="left">
                <div>{{ visitorData.name }}</div>
                <span>{{ visitorData.certificatesNo }}</span>
                <span>{{ visitorData.param?.certificatesTypeString }}</span>
            </div>
            <div class="right" @click="$router.push(`/user/detail?id=${visitorData.id}`)">
                <span>查看详情</span>
                <svg t="1734158864144" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="1445" width="13" height="13">
                    <path
                        d="M300.586667 895.701333c9.6 0 19.328-3.2 27.392-9.6l423.808-340.906666a43.733333 43.733333 0 0 0 0-68.096L329.813333 137.984A43.690667 43.690667 0 0 0 275.114667 206.08l379.605333 305.109333-381.525333 306.773334a43.690667 43.690667 0 0 0 27.392 77.738666z"
                        fill="#595959" p-id="1446"></path>
                </svg>
            </div>
        </div>
        <div class="info">
            <div class="type">
                <span>{{ visitorData.isInsure == 1 ? '医保' : '自费' }}</span>
                <span>{{ visitorData.certificatesNo }}</span>
                <span>{{ visitorData.param.certificatesTypeString }}</span>
            </div>
        </div>
    </el-card>
</template>

<script setup lang="ts">

defineProps(['visitorData'])
</script>

<style scoped lang="scss">
.people {
    cursor: pointer;
    margin: 20px 0;

    .header {
        border-bottom: 1px solid #efefef;
        padding-bottom: 15px;
        display: flex;
        justify-content: space-between;

        .left {
            display: flex;
            align-items: center;
            white-space: nowrap;

            div {
                margin-right: 25px;
            }

            span {
                color: #999999;
                margin-right: 8px;
                font-size: 12px;
            }
        }

        .right {
            color: #999999;
            display: flex;
            align-items: center;
            white-space: nowrap;

            span {
                margin-right: 3px;
            }
        }
    }

    .info {
        margin-top: 15px;
        border-radius: 4px;
        // width: 60%;

        .type {
            color: #fff;
            padding: 13px;
            white-space: nowrap;
            background-color: #89C4ED;
            // display: inline-block;

            span:nth-child(1) {
                background-color: #fff;
                padding: 3px;
                border-radius: 4px;
                color: #89C4ED;
                font-size: 12px;
            }

            span:not(:nth-child(1)) {
                margin-left: 10px;
            }
        }
    }
}
</style>